import { useEffect, useState } from 'react';
import DownOutlined from '@ant-design/icons/DownOutlined';
import UpOutlined from '@ant-design/icons/UpOutlined';
import SettingOutlined from '@ant-design/icons/SettingOutlined';
import ProfileOutlined from '@ant-design/icons/ProfileOutlined';
import LogoutOutlined from '@ant-design/icons/LogoutOutlined';
import smartfetch from '@mmstudio/an000058';
import {
	Menu,
	MenuItem
} from '@szhsin/react-menu';
import Link from '../components/link';
import { Result } from './api/account/userinfo.api';
import api from '../atoms/api';
import '@szhsin/react-menu/dist/index.css';

export default function Profile() {
	const [username, setusername] = useState('');
	const [picture, setpicture] = useState('');
	useEffect(() => {
		void (async () => {
			const data = await smartfetch<Result>(api['/api/account/userinfo'], 'get');
			setusername(data.name);
			setpicture(data.picture);
		})();
	}, []);
	return <div className='cls001'>
		{picture && <img className='img' src={picture} />}
		<Menu
			menuButton={({ open }) => {
				return <span className='user'>
					<span className='username'>{username}</span>
					{open ? <UpOutlined /> : <DownOutlined />}
				</span>;
			}}
			align='end'
			position='auto'
			offsetY={20}
		>
			<MenuItem key="2" >
				<Link href='/account/profile'><ProfileOutlined /><span>个人信息</span></Link>
			</MenuItem>
			<MenuItem key="1" >
				<Link href='/account/changepsw'><SettingOutlined /><span>修改密码</span></Link>
			</MenuItem>
			<MenuItem key="3" >
				<a href={api['/api/account/logout']}>
					<LogoutOutlined />
					<span>退出登录</span>
				</a>
			</MenuItem>
		</Menu>
		<style jsx>{`
.img{
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.username{
padding: 0 1rem;
}
.user{
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: nowrap;
	cursor: pointer;
	justify-content: space-between;
}
span{
	color: #333333;
	font-size: 0.9rem;
	margin-left: 1rem;
}
.cls001{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 2rem;
}
`}</style>
	</div>;
}
